<!DOCTYPE html>
<html>
  <head>
    <title>x-clock</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
    <script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/0.5.3/document-register-element.js"></script>
    <script>
    var Star = document.registerElement('x-star', {
      prototype: {
        createdCallback: function () {
          document.body.appendChild(
            document.createElement('p')
          ).textContent = 'created';
        },
        attachedCallback: function () {
          document.body.appendChild(
            document.createElement('p')
          ).textContent = 'attached';
        }
      }
    });
    </script>
  </head>
  <body>
    <x-star>★</x-star>
  </body>
</html>